<template>
  <view>
    <view class="content">
      <view class="list" v-for="(item, index) in itemList" :key="index">
        <image mode="widthFix" :src="item.imageSrc"></image>
        <view class="title">{{ item.title }}</view>
        <view class="con">{{ item.content }}</view>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
		imageList: [
			"https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
			"https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
			"https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
			"https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
			"https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
			"https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
		],
      itemList: [
        {
          imageSrc: "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
          title: '我是标题1',
          content: '我是内容1',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
          title: '我是标题2',
          content: '我是内容2',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
          title: '我是标题3',
          content: '我是内容3',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
          title: '我是标题4',
          content: '我是内容4',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题5',
          content: '我是内容5',
        },
      ],
    };
  },
  onUnload() {},
  methods: {},
};
</script>
 
<style scoped>
.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
}
image {
  width: 100%;
  border-radius: 6rpx;
}
.title {
  margin-left: 15rpx;
  margin-right: 15rpx;
  font-size: 30rpx;
}
.con {
  margin: 15rpx;
  margin-top: 20rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  justify-content: space-between;
}
.list {
  break-inside: avoid;
  width: 330rpx;
  border: 1px solid #f4f4f4;

}
</style>